<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>custom-demo</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../src/tlayout.min.js"></script>
</head>

<body style='position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:10px;'>
  <div style="height:100%;">
    <div style="float:left;width:30%;height:100%;">
      <!-- 可以设置ui-width:'20%'，也可以设置width:{val:20,type:'percent'} -->
      <textarea id='jsonobj' oninput='refreshObj()' style="width:100%;height:100%;margin:0px;padding:0px;">
{
  type:'v-layout',
  children:[
    {
       type:'h-layout',
       style:'background-color:blue;',
       width:{val:100,type:'percent'},
       height:{val:20,type:'percent'}
    },
    {
      type:'h-layout',
      gap:{type:'fixed',val:4},
      width:{type:'percent',val:100},
      height:{type:'fill'},
      children:[
        {'ui-width':'20%','ui-height':'100%',style:'background-color:red;'},
        {'ui-width':'40%','ui-height':'100%',style:'background-color:green;'},
        {'ui-width':'fill','ui-height':'100%',style:'background-color:yellow;'}
      ]
    }
  ]
}     </textarea>
    </div>
    <div id="htmlobj" style='position:relative;float:left;width:70%;height:100%;'></div>
  </div>
</body>

<script>
  refreshObj();

  function refreshObj() {
    var data, s;
    try {
      s = '('+document.getElementById('jsonobj').value+')';
      data = eval(s);
    } catch(err) {
      console.log(s, err);
    }

    var rootnode = document.getElementById('htmlobj');
    $(rootnode).empty();
    tlt.createLayout(rootnode, data);
    tlt.doLayout(tlt.initLayout(rootnode));
  }
</script>

</html>
